<template>
	<view class="body">
		<view class="inputStyle">
			<u-input v-model="value" placeholder="请输入影视名称" height="90" :type="type" />
		</view>
		<view class="btn-box">
			<button @click="toSearch" class="button">搜 索</button>
		</view>
		<scroll-view scroll-y style="height:100vh;width: 100%;" @scrolltolower="onreachBottom()">
		<view class="ym-gird">
			<view class="ym-gird-item" v-for="(item,index) in videoList" @click="navto(item)" :key="index">
				<image class="ym-gird-img" mode="aspectFill" :src="item.vod_pic"></image>
				<text class="ym-gird-title">{{item.vod_name}}</text>
				<text class="ym-gird-info">{{item.vod_remarks}}</text>
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		siteUrls
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				videoUrl: "",
				videoList: [],
				page: 1
			}
		},
		onLoad() {

		},
		methods: {
			toSearch(e) {
				var that = this;
				uni.showLoading({
					title: "正在加载...",
					mask: true
				});
				that.url = uni.getStorageSync('url');
				that.videoList = [];
				that.page = 1;
				// 获取数据
				uni.request({
					url: that.url,
					data: {
						pg: that.page,
						ac: 'videolist',
						wd: that.value,
					},
					method: "GET",
					header: {
						"content-type": "application/json",
					},
					success: function(res) {
						that.videoList = res.data.list;
						uni.hideLoading();
					},
					fail: function() {
						uni.hideLoading();
						uni.showModal({
							title: "网络错误",
							content: "网络出错，请刷新重试",
							showCancel: !1
						});
					}
				})
			},
			onreachBottom() {
				uni.showLoading({
					title: "正在加载...",
					mask: true
				});
				
				var that = this;
				that.page++;
				uni.request({
					url: that.url,
					data: {
						pg: that.page,
						ac: 'videolist',
						wd: that.value,
					},
					method: "GET",
					header: {
						"content-type": "application/json"
					},
					success: function(res) {
						that.videoList = that.videoList.concat(res.data.list);
						uni.hideLoading();
					},
					fail: function() {
						that.page--;
						uni.hideLoading();
						uni.showModal({
							title: "网络错误",
							content: "网络出错，请刷新重试",
							showCancel: !1
						});
					}
				})
			},
			navto(e) {
				uni.navigateTo({
					url: '/pages/play/play?id=' + e.vod_id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.inputStyle {
		margin-top: 30rpx;
		background-color: white;
		border-radius: 50rpx;
		width: 700rpx;
		height: 90rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.btn-box {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.button{
		background-color: #19be6b;
		color: #ffffff;
		border: none;
		border-radius: 80rpx;
		padding: 0 80rpx;
	}

	.ym-gird {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		width: 750rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;

		.ym-gird-item {
			width: 236.6666rpx;
			display: flex;
			flex-direction: column;
			background-color: white;
			margin: 5rpx;
			border-radius: 10rpx;

			.ym-gird-img {
				width: 236.6666rpx;
				height: 300rpx;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
			}

			.ym-gird-title {
				font-size: 32rpx;
				color: #333333;
				padding: 5rpx 10rpx;
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 1;
				/** 显示的行数 **/
				overflow: hidden;
				/** 隐藏超出的内容 **/
			}

			.ym-gird-info {
				font-size: 28rpx;
				color: #666666;
				padding: 5rpx 10rpx;
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 2;
				/** 显示的行数 **/
				overflow: hidden;
				/** 隐藏超出的内容 **/
				min-height: 80rpx;
			}
		}
	}
</style>